<template>
  <div>
    <div class="colorBox" :style="{'background-color': bgColor }"></div>
    <div>
      R:<input type="range"  max="250" v-model="R"/> 
      G:<input type="range"  max="250" v-model="G"/>
      B:<input type="range"  max="250" v-model="B"/> 
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      R: 0,
      G: 0,
      B: 0,
    };
  },
  computed: {
    bgColor() {
      return `rgb(${this.R},${this.G},${this.B})`;
    },
  },
};
</script>
<style scoped>
.colorBox {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
</style>
